<template>
  <div>
    <div  :style="background" class="bgBackground">
    <div style="margin-top: 10px;">
    <van-nav-bar class="dz-dh"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft"
    />
  </div>
    <div style="float: left;width: 100%">
      <p style="margin-top:20%;width: 100%;color: chocolate">累计跑步距离></p>
      <label style="font-weight: bold;font-size: 30px;color: #42b983">{{km}}</label><label >公里</label>
    </div>

      <div style="margin-top: 80%;">
        <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" @click="run()">
          开始跑步
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RunningView",
  data(){
    return{
      km:9999.99,
      background: {
      backgroundImage: 'url(' + require('../assets/images/pbtp1.jpg') + ')',
      backgroundSize: 'cover',
      }
    }
  },methods:{
    onClickLeft(){
        history.back();
      },
    run(){
      this.$router.push("/maprun")
    }
    }
}
</script>

<style scoped>
.bgBackground{
  width:100%;
  height:700px;
  /*positi on: fixed;*/
}

</style>
